<template>
	<view class="w100 tr browser_container">

		<view class="fenlei_title">
			<view class="fenlei_h"><b>*</b>作业分类：</view>
			<view class="fenlei_is_css" @click="acti_click1">{{fenlei_is1?fenlei_is1:'请选择作业分类'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm1($event)" ref="activity_is1" :options="worktype"></w-picker>
		</view>

		<view class="fenlei_title">
			<view class="fenlei_h"><b>*</b>课程/分类：</view>
			<view class="fenlei_is_css" @click="acti_click2">{{fenlei_is2?fenlei_is2:'请选择课程'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm2($event)" ref="activity_is2" :options="kc_list"></w-picker>
		</view>
		<view class="fenlei_title">
			<view class="fenlei_h"><b>*</b>章节/名称：</view>
			<view class="fenlei_is_css" @click="acti_click3">{{fenlei_is3?fenlei_is3:'请选择章节'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm3($event)" ref="activity_is3" :options="mindType_list"></w-picker>
		</view>

		<view class="fenlei_title" v-if="second_level">
			<view class="fenlei_h"><b>*</b>章节：</view>
			<view class="fenlei_is_css" @click="acti_click4">{{fenlei_is4?fenlei_is4:'请选择节'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm4($event)" ref="activity_is4" :options="second_list"></w-picker>
		</view>

		<view class="fenlei_title" v-if="third_level">
			<view class="fenlei_h"><b>*</b>小节：</view>
			<view class="fenlei_is_css" @click="acti_click5">{{fenlei_is5?fenlei_is5:'请选择小节'}}</view>
			<w-picker mode="selector" :default-props="activity_type" default-type="name"
				@confirm="onTypeConfirm5($event)" ref="activity_is5" :options="third_list"></w-picker>
		</view>


		<view class="w100 exam-container" v-if="exam_list.length">
			<view class="exam-list">
				<view class="exam-item" v-for="(item, index) in exam_list" :key="index">
					<h4 style="display: flex;">
						<view style="width: 58px;text-align: right;">{{ index + 1 }} .</view>
						<p style="padding-left: 20px;">
							<view v-if="item.type == 1">(单选题)</view>
							<view v-if="item.type == 2">(多选题)</view>
							<view v-if="item.type == 3">(判断题)</view>
							{{ item.title }}
						</p>
					</h4>
					<view class="exam-item-options w100">
						<view style="width: 75px;align-self: flex-start;" class="exam-item-title">
							<view>选项:</view>
						</view>
						<view class="w100">
							<view class="exam-item-option" v-for="(option, index) in item.choose" :key="index">
								<view style="text-align: center;">{{ xuanxiang[index] }}:</view>
								<view>{{ option }}</view>
							</view>
						</view>
					</view>
					<view class="exam-item-answers w100">
						<view class="exam-item-title">答案:</view>
						<view style="display: flex; align-items: center;font-size: 16px; font-weight: bold;">
							<view v-if="item.type == 1">
								<view v-for="ite in item.answer" :key="ite">{{ xuanxiang[ite - 1] }}</view>
							</view>
							<view v-if="item.type == 2">
								<view v-for="ite in item.answer" :key="ite">{{ xuanxiang[ite - 1] }}</view>
							</view>
							<view v-if="item.type == 3">
								<view v-if="item.answer[0] == 2">√</view>
								<view v-if="item.answer[0] == 1">×</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w100 exam-container" style="text-align: center;" v-if="error_message">
			{{ error_message }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fenlei_is1: '',
				fenlei_is2: '',
				fenlei_is3: '',
				fenlei_is4: '',
				fenlei_is5: '',
				activity_type: {
					"label": "name",
					"value": "id"
				},
				form: {},
				kc_list: [],
				mindClazzId: "",
				selectedworkid: "",
				firstChapter: "",
				secondChapter: "",
				thirdChapter: "",
				chapter_list: [],
				second_list: [],
				third_list: [],
				second_level: false,
				third_level: false,
				exam_list: [],
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				stype: "kc",
				mindTypeId: "",
				mindType_list: [],
				cate_inner_list: [],
				mindId: "",
				error_message: "",
				worktype: [{
					id: 0,
					name: '思政课程',
				}, {
					id: 1,
					name: '精神谱系',
				}, {
					id: 2,
					name: '全景思政',
				}, {
					id: 3,
					name: 'VR仿真',
				}]
			};
		},
		created() {
			// this.getMindClazzList();
		},
		methods: {
			acti_click1() {
				this.$refs.activity_is1.show();
			},
			onTypeConfirm1(val) {
				this.fenlei_is1 = val.result
				if (val.value == 0) {
					this.stype = 'kc'
					this.kc_list = []
					this.second_level = false;
					this.second_list = [];
					this.chapter_list = [];
					this.third_list = [];
					this.third_level = false;
					this.getMindClazzList();
					
				} else if (val.value == 1) {
					this.stype = 'ca'
					this.kc_list = []
					this.getmind()
				} else if (val.value == 2) {
					this.stype = 'qa'
					this.quanjing()
					this.kc_list = []
				} else if (val.value == 3) {
					this.stype = 'vr'
					this.vr_list()
					this.kc_list = []

				}
				// this.type_name = val.value
			},
			acti_click2() {
				this.$refs.activity_is2.show();
			},
			//课程
			onTypeConfirm2(val) {
				this.fenlei_is2 = val.result
				if(this.stype == 'kc'){
					this.mindClazzId = val.value
					this.second_list = []
					this.handleChange()
				}else if(this.stype == 'ca'){
					this.second_list = []
					this.mindTypeId = val.value
					this.getMindByType()
				}else if(this.stype == 'qa'){
					this.second_list = []
					this.quanjing_list(val.value)
				}else if(this.stype == 'vr'){
					this.second_list = []
					this.vr_list_li(val.value)
				}
				
				// this.type_name = val.value
			},
			acti_click3() {
				this.$refs.activity_is3.show();
				
			},
			onTypeConfirm3(val) {
				this.fenlei_is3 = val.result
				if(this.stype == 'kc'){
					this.secondChapter = val.value
					this.chapterChange(val.value)
				}else if(this.stype == 'ca'){
					this.mindId = val.value
					this.mindIdHandleChange()
				}else if(this.stype == 'qa'){
					this.getVoviDetail(val.value)
				}else if(this.stype == 'vr'){
					this.getVrDetail(val.value)
				}
				
				// this.type_name = val.value
			},
			acti_click4() {
				this.$refs.activity_is4.show();
			},
			onTypeConfirm4(val) {
				this.fenlei_is4 = val.result
				// this.type_name = val.value
			},
			acti_click5() {
				this.$refs.activity_is5.show();
			},
			onTypeConfirm5(val) {
				this.fenlei_is5 = val.result
				// this.type_name = val.value
			},
			//vr
			vr_list(){
				this.pyReq(this.$http.getVrTypeInfo, {}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.kc_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			//vr
			vr_list_li(vrid){
				let id = vrid 
				let	pageNo=1
				let	pageSize=99999
				
				this.pyReq(this.$http.getVRListByType, {id,pageNo,pageSize}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							console.log('[]',res.result)
							res.result.forEach((item, index) => {
								this.mindType_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			getVrDetail(vrId) {
				var that = this
				that.pyReq(that.$http.getVrDetail, {
					vrId: vrId
				}, function(res) {
					if (!res.result.testPreview) {
						res.result.testPreview = 0
					} else {
						res.result.testPreview.map((item, index) => {
							item['checked'] = false
							item['type'] = item['testType']
						})
					}
					that.exam_list = res.result.testPreview
				});
			},
			//全景思政
			quanjing() {
				this.pyReq(this.$http.getVoviTypeInfo, {}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.kc_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			quanjing_list(vid) {
				let id = vid
				this.pyReq(this.$http.getVoviByType, {id}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.mindType_list.push({
									'name': item.name,
									'id': item.id,
								})
							});
						}
					}
				});
			},
			getVoviDetail(voviId) {
				var that = this
				that.pyReq(that.$http.getVoviDetail, {
					voviId: voviId
				}, function(res) {
					console.log('that.content',res.result)
					if(res.result.testPreview){
						res.result.testPreview.map((item, index) => {
							item['checked'] = false
							item['type'] = item['testType']
						})
					}else{
						res.result.testPreview = 0
					}
					that.exam_list = res.result.testPreview
				});
			},
			
			stypeChange() {
				this.exam_list = [];
			},
			SoonDevelop() {
				uni.showToast({
					title:'即将开放！'
				})
			},
			mindIdHandleChange() {
				this.getTestDetailByClazz();
			},
			getTestDetailByClazz() {
				const {
					pageNo,
					pageSize,
					mindId
				} = this;
				if (this.stype == 'kc') {
					var chapterId = null;
					chapterId = this.thirdChapter || this.secondChapter || this.firstChapter;
					console.log('chapterId',chapterId)
					this.pyReq(
						this.$http.getAllTestByClazz, {
							pageNo: 1,
							pageSize: 9999,
							chapterId,
						},
						(res) => {
							if (res.code == 0) {
								console.log('res:', !res.result, res);
								if (!res.result) {
									this.exam_list = [];
									uni.showToast({
										title:'暂时未上传测试题！'
									})
									return;

								}
								this.checkWorkList = (res.result.records || []).map(item => item.id);
								this.exam_list = res.result.records;
								this.error_message = "";
							} else if (res.code == 400) {
								uni.showToast({
									title:res.msg
								})
							}
						}
					);
				} else if (this.stype == 'ca') {
					this.pyReq(
						this.$http.getAllTestByMind, {
							pageNo: 1,
							pageSize: 9999,
							mindId
						},
						(res) => {
							if (res.code == 0) {
								if (!res.result) return this.$message({
									type: "error",
									message: "此课程暂未上传试题",
									offset: 150
								});
								this.checkWorkList = res.result.records.map(item => item.id);
								this.exam_list = res.result.records;
								if (fn) fn();
							} else if (res.code == 400) {
								this.$message.error(res.msg);
							}
						});
				}else if (this.stype == 'qa') {
					this.pyReq(
						this.$http.getAllTestByMind, {
							pageNo: 1,
							pageSize: 9999,
							mindId
						},
						(res) => {
							if (res.code == 0) {
								if (!res.result) return this.$message({
									type: "error",
									message: "此课程暂未上传试题",
									offset: 150
								});
								this.checkWorkList = res.result.records.map(item => item.id);
								this.exam_list = res.result.records;
								if (fn) fn();
							} else if (res.code == 400) {
								this.$message.error(res.msg);
							}
						});
				}else if (this.stype == 'vr') {
					this.pyReq(
						this.$http.getAllTestByMind, {
							pageNo: 1,
							pageSize: 9999,
							mindId
						},
						(res) => {
							if (res.code == 0) {
								if (!res.result) return this.$message({
									type: "error",
									message: "此课程暂未上传试题",
									offset: 150
								});
								this.checkWorkList = res.result.records.map(item => item.id);
								this.exam_list = res.result.records;
								if (fn) fn();
							} else if (res.code == 400) {
								this.$message.error(res.msg);
							}
						});
				}
			},

			getMindByType() {
				this.mindId = "";
				this.mindType_list = [];
				const {
					mindTypeId
				} = this;
				console.log('[[]]',mindTypeId)
				if (!mindTypeId) return;
				this.pyReq(this.$http.getMindByType, {
					mindTypeId,
					pageNo: 1,
					pageSize: 9999
				}, (res) => {
					if (res.code == 0) {
						console.log('[[[]]]',res);
						if (res.result && res.result.records.length !== 0) {
							res.result.records.forEach((item, index) => {
								this.mindType_list.push({
									'name': item.mindName,
									'id': item.mindId,
								})
							});
						}
					}
				});
			},
			thirdChapterChange(chapterId) {
				if (chapterId) this.getAllTestByClazz(chapterId);
			},
			getAllTestByClazz(chapterId) {
				this.pyReq(
					this.$http.getAllTestByClazz,
					// { chapterId: 27, pageNo: 1, pageSize: 2 },
					{
						chapterId,
						pageNo: 1,
						pageSize: 99999
					},
					res => {
						if (res.code == 0) {
							if (!res.result) {
								this.error_message = "暂时未上传测试题！";
								this.exam_list = [];
								return;
							}
							this.exam_list = res.result.records || [];
							this.error_message = "";
						}
					}
				);
			},
			getMindClazzList() {
				this.pyReq(this.$http.getMindClazzListSecond, {}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.length !== 0) {
							res.result.forEach((item, index) => {
								this.kc_list.push({
									'name': item.mindClazzName,
									'id': item.mindClazzId,
								})
							});

						}
					}
				});

			},
			getmind() {
				this.pyReq(this.$http.getMindType, {
					pageNo: 1,
					pageSize: 9999
				}, (res) => {
					if (res.code == 0) {
						if (res.result && res.result.records.length !== 0) {
							res.result.records.forEach((item, index) => {
								this.kc_list.push({
									'name': item.mindTypeName,
									'id': item.mindTypeId,
								})
							});
						}
					}
				});
			},
			handleChange() {
				this.second_level = false;
				this.second_list = [];
				this.secondChapter = "";
				this.firstChapter = "";
				this.chapter_list = [];
				this.third_list = [];
				this.third_level = false;
				this.thirdChapter = "";
				this.getFirstChapter();
			},
			secondChapterChange(chapterId) {
				if (chapterId) this.getTestDetailByClazz();
				const arr = this.second_list.filter(item => item.id == chapterId);
				if (arr.length != 0 && arr[0].isEnd == 0) {
					this.third_level = true;
				} else if (arr.length != 0 && arr[0].isEnd == 1) {
					// this.getAllTestByClazz(chapterId);
					return (this.third_level = false);
				}

				this.pyReq(this.$http.getChildChapter, {
					chapterId
				}, res => {
					this.third_list = res.result;
				});
			},
			chapterChange(chapterId) {
				this.second_level = false;
				this.third_level = false;
				
				this.getTestDetailByClazz();
				const arr = this.second_list
				console.log("arr", arr)
				if (arr.length != 0 && arr[0].isEnd == 0) {
					this.second_level = true;
				} else if (arr.length != 0 && arr[0].isEnd == 1) {
					// this.getAllTestByClazz(chapterId);
					return (this.second_level = false);
				}
				this.pyReq(this.$http.getChildChapter, {
					chapterId
				}, (res) => {
					res.result.forEach((item, index) => {
						this.second_list.push({
							'name': item.chapterName,
							'id': item.id,
							'isEnd': item.isEnd,
						})
					});
				});
			},
			getFirstChapter() {
				this.mindType_list = []
				const {
					mindClazzId
				} = this;
				if (!mindClazzId && mindClazzId != 0) return;
				this.pyReq(this.$http.getFirstChapter, {
					mindClazzId
				}, (res) => {
					res.result.forEach((item, index) => {
						this.mindType_list.push({
							'name': item.chapterName,
							'id': item.chapterId,
							'isEnd': item.isEnd,
						})
					});
				});
			}
		}
	};
</script>

<style lang="scss">
	.fenlei_title {
		padding: 0 5px;
		display: flex;
		justify-content: space-between;
	}

	.fenlei_h {
		font-size: 15px;
		line-height: 25px;
		margin-top: 5px;

	}

	.fenlei_h b {
		color: #B31610;
	}

	.fenlei_is_css {
		overflow: hidden;
		width: 70%;
		line-height: 25px;
		border: 1px solid #ddd;
		border-radius: 7px;
		padding-left: 5px;
		margin-top: 5px;
		height: 27px;
	}

	.exam-container {
		border: 1px solid #eee;
		border-radius: 10px;
		padding: 5px;
		width: 90%;
		margin: 5px auto;
	}

	.exam-list {
		text-align: left;
	}

	.exam-item {
		margin-bottom: 30px;


	}

	.exam-item-options,
	.exam-item-answers {
		text-indent: 1.5em;
		display: flex;
		align-items: center;
	}

	.exam-item-answers {
		margin-top: 10px;
	}

	.exam-item-option {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.exam-item-title {
		font-weight: bolder;
		font-size: 16px;
	}

	.exam-checkbox-group {
		display: flex;
		align-items: center;
	}

	.exam-checkbox {
		margin-right: 30px;
		width: 50px;


	}

	.el-checkbox__label {
		padding: 0;
	}

	.exam-radio-group {
		margin-left: -10px;
		display: flex;
		align-items: center;
	}

	.exam-radio {
		margin-right: 30px;
		width: 50px;
	}
</style>
